@media screen and (-webkit-min-device-pixel-ratio: 0) {
  .slider {
    @apply h-10 overflow-hidden rounded border;
  }

  .slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    @apply border-2 border-solid;
    @apply h-9 w-2 rounded-lg;
  }
}
/* Firefox */
.slider::-moz-range-progress {
  @apply h-full;
}
.slider::-moz-range-track {
  @apply h-full;
}
.slider::-moz-range-thumb {
  -webkit-appearance: none;
  @apply border-2 border-solid;
  @apply h-9 w-2 rounded-none; /* on Firefox we need to remove the radius because the browser renders the thumb at the end of the progress bar */
}
/* IE */
.slider::-ms-fill-lower {
  @apply h-full;
}
.slider::-ms-fill-upper {
  @apply h-full;
}
.slider::-ms-thumb {
  -webkit-appearance: none;
  @apply w-3;
  @apply h-3;
  @apply rounded-full;
  @apply bg-black;
}
